import React, { useState, useEffect } from "react";
import { Table, Card, Button, Modal, Form, Input } from "antd";
import systemStyle from "./index.module.scss";
import { limitColumn } from "./column";
import { queryLimitList } from "@/api/index.js";
import handleChildren from "@/utils/handleChildren";
import { addLimit, modifyLimit, deleteLimit } from "@/api/index.js";
export default function limit() {
  const [paginationObj, setPaginationObj] = useState({ page: 1, size: 10 });
  const [loading, setLoading] = useState(false);
  const [list, setList] = useState([]);
  const [type, setType] = useState("add");
  const [addEditVisible, setAddEditVisible] = useState(false);
  const [deleteVisible, setDeleteVisible] = useState(false);
  const [parentId, setParentId] = useState(-1);
  const [selectId, setSelectId] = useState(-1);
  const requireRule = { required: true, message: "必填字段" };
  useEffect(() => {
    getList();
  }, []);

  const [form] = Form.useForm();

  const getList = async () => {
    const res = await queryLimitList();
    let limitList = handleChildren(res.data);
    console.log(limitList, "res");
    setList(limitList);
  };
  const handlePageChange = (page, size) => {
    // getList({ page, size });
  };

  const handleSizeChange = (page, size) => {
    // getList({ page, size });
  };

  const handleClose = () => {
    form.resetFields();
    setAddEditVisible(false);
    setParentId(-1);
  };

  const handleOpenEditAddVisible = (type) => {
    setType(type);
    setAddEditVisible(true);
  };

  const handleFinish = async (value) => {
    console.log("type", type, value);
    if (type == "add") {
      if (parentId != -1) {
        value.parentId = parentId;
      }
      const res = await addLimit(value);
      if (res && res.code == 200) {
        window.$message.success("添加成功！");
      }
      handleClose();
    } else {
      value.id = selectId;
      const res = await modifyLimit(value);
      if (res && res.code == 200) {
        window.$message.success("修改成功！");
      }
      handleClose();
    }
    console.log(value, "finish");
    getList();
  };
  const handleFinishFail = () => {};

  //   子添加
  const handleChildrenAdd = (row) => {
    setType("add");
    setAddEditVisible(true);
    setParentId(row.id);
    console.log(row, "子添加");
  };

  //   编辑
  const handleEdit = (row) => {
    setSelectId(row.id);
    setType("edit");
    setAddEditVisible(true);
    form.setFieldsValue(row);
    console.log(row, "row");
  };

  //   删除
  const handleDelete = (row) => {
    console.log("删除", row);
    setDeleteVisible(true);
    setSelectId(row.id);
  };

  const handleCloseDelete = () => {
    setDeleteVisible(false);
    setSelectId(-1);
  };

  const handleDeleteOk = async () => {
    console.log("ok");
    const res = await deleteLimit({ id: selectId });
    if (res && res.code == 200) {
      window.$message.success("删除成功！");
    }
    handleCloseDelete();
    getList();
  };

  const columns = limitColumn({ handleChildrenAdd, handleEdit, handleDelete });
  return (
    <div className={systemStyle.index}>
      <div className={systemStyle.top}>
        <Card>
          <Button
            type="primary"
            onClick={() => handleOpenEditAddVisible("add")}
          >
            添加权限
          </Button>
        </Card>
      </div>
      <div className={systemStyle["table-container"]}>
        <Table
          columns={columns}
          dataSource={list}
          rowKey={(record) => record.id}
          loading={loading}
          pagination={{
            pageSize: paginationObj.pageSize,
            current: paginationObj.currentPage,
            pageSizeOptions: [3, 5, 10, 20],
            showSizeChanger: true,
            total: paginationObj.total,
            showTotal: (total) => `共${total}条`,
            onChange: handlePageChange,
            onShowSizeChange: handleSizeChange,
          }}
        />
      </div>
      <Modal
        title={type === "add" ? "添加权限" : "编辑权限"}
        open={addEditVisible}
        onCancel={handleClose}
        footer={null}
      >
        <Form
          style={{ padding: "20px" }}
          form={form}
          onFinishFailed={handleFinishFail}
          onFinish={handleFinish}
        >
          <Form.Item label="权限名称" name="name" rules={[requireRule]}>
            <Input></Input>
          </Form.Item>
          <Form.Item label="权限标识" name="sign" rules={[requireRule]}>
            <Input></Input>
          </Form.Item>
          <Form.Item label="权限描述" name="description" rules={[requireRule]}>
            <Input></Input>
          </Form.Item>

          <Form.Item style={{ textAlign: "center" }}>
            <Button onClick={handleClose} style={{ marginRight: "40px" }}>
              取消
            </Button>
            <Button type="primary" htmlType="submit">
              确定
            </Button>
          </Form.Item>
        </Form>
      </Modal>
      <Modal
        onCancel={handleCloseDelete}
        open={deleteVisible}
        okText="确定"
        cancelText="取消"
        onOk={handleDeleteOk}
      >
        确定要删除该权限吗?
      </Modal>
    </div>
  );
}
